const gulp = require('gulp')            // gulp模块，用于创建任务的
const uglify = require('gulp-uglify')   // 压缩JS 去空格去注释
const babel = require('gulp-babel')     // es6转es5 浏览器兼容 babel
const rev = require('gulp-rev')         // 加随机名的，内容修改就重新生成新的随机名
const revCollector = require('gulp-rev-collector'); // 根据temp目录记录的规则 替换 html路径
const clean = require('gulp-clean')     // 删除目录文件的
const minifyCSS = require('gulp-minify-css') // 压缩CSS 去空格去注释的
const imagemin = require('gulp-imagemin') // 压缩图片
const htmlmin = require('gulp-htmlmin')  // 压缩HTML 去空格去注视

gulp.task('html', (over) => {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS 
        minifyCSS: true//压缩页面CSS
    };
    gulp
        .src(['temp/**/*.json', './src/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/src'))
    over()
})

gulp.task('js', over => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/src/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'))
    over()
})

gulp.task('css', over => {
    gulp.src('./src/css/*.css')
        .pipe(minifyCSS())
        .pipe(rev())
        .pipe(gulp.dest('./dist/src/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))
    over()
})

const fs = require('fs')
gulp.task('clean', over => {
    if (fs.existsSync('dist/')) {
        gulp.src('dist/', { read: false })
            .pipe(clean());
    }
    setTimeout(() => {
        over()
    }, 2000)
})

gulp.task('imgs', over => {
    gulp
        .src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/src/imgs/'))


    setTimeout(() => {
        over()
    }, 30000) // 30s
})

gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
    console.log('打包完成');
}))


const { createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create();
const watch = require('gulp-watch');
gulp.task('serve', () => {

    server.init({
        server: {
            baseDir: './src',
            middleware: [
                // ...
                // 代理请求的地址：target + $.get/post/ajax的url
                // http://kg.zhaodashen.cn/v1/web2105/goods/like.jsp
                // createProxyMiddleware('要监控的请求地址', {固定格式})
                createProxyMiddleware('/api', {
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/v1/",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 移除
                        // '^/remove/api' : ''
                        '^/api': ''
                    },
                })
                // ...
            ]
        },
        port: 3000
    })

    // 监控文件修改
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/style/*.css', function () {
        console.log('你修改CSS文件了')
        server.reload()
    })
    watch('src/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})